<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <script src="../../vue-router.js"></script>

  <style>

#app{
  position: relative;
}

.box {
  width: 200px;
  height: 500px;
  position: absolute;
  
}

.movie {
  background: cadetblue;
}

.theater {
  background: rgb(137, 235, 91);
}

.profile{
  background: rgb(224, 125, 211);
}

.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}


.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-active,
.slide-left-enter-active ,
.slide-right-leave-active,
.slide-right-enter-active {
  transition: all 0.3s;
}



  </style>

</head>

<body>

  <div id="app">

    <router-link to='/movie'>电影</router-link>
    <router-link to='/theater'>影院</router-link>
    <router-link to='/profile'>我的</router-link>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>

  </div>


  <script>

    var routes =[
      {
        path:"/movie",
        component:{template:`<div class="box movie"> movie </div>`},
        meta:{sort:1}
      },
      {
        path:"/theater",
        component:{template:`<div class="box theater"> theater </div>`},
        meta:{sort:2}
      },
      {
        path:"/profile",
        component:{template:`<div class="box profile"> profile </div>`},
        meta:{sort:3}
      }
    ]

    var router = new VueRouter({
      routes
    })

    var vm = new Vue({
      router,
      el: "#app",
      data:{
        transitionName:'slide-right'
      },
      watch:{
        $route(to,from){
          console.log(to.meta)
          if(to.meta.sort>from.meta.sort){
            this.transitionName = 'slide-right'
          }else{
            this.transitionName = 'slide-left'
          }
        }
      }
    })

  </script>

</body>

</html>